import { Meta } from '@storybook/addon-docs'; import image01 from './assets/dialogos/1.png'; import image02 from './assets/dialogos/2.png'; import image03 from './assets/dialogos/3.png'; import image04 from './assets/dialogos/4.png'; import image05 from './assets/dialogos/5.png'; import image06 from './assets/dialogos/6.png'; import image07 from './assets/dialogos/7.png'; import image08 from './assets/dialogos/8.png'; import image09 from './assets/dialogos/9.png'; import image10 from './assets/dialogos/10.png'; import image11 from './assets/dialogos/11.png'; import image12 from './assets/dialogos/12.png'; # Diálogos / Dialogs El diálogo es un patrón utilizado para recibir información del usuario, solicitar una acción del mismo o para alertarle sobre una tarea que está llevando a cabo. El uso de los diálogos son muy útiles, desorientan menos al usuario en lugar de llevarlo a una nueva página para realizar tareas simples o recopilación de información, sin embargo, su uso debe realizarse con moderación, ya que utilizarlos con mucha asiduidad, puede distraer e interrumpir la navegación al usuario y crearles una mala experiencia. El diálogo se basa en un componente elemental que aparece sobre el contenido de la página o pantalla que el usuario está visualizando denominado ventana emergente. ### Componente ventana emergente El componente ventana emergente, es un elemento que se utiliza habitualmente para tareas breves y poco frecuentes, como tareas de gestión. La ventana emergente enfoca la atención del usuario exclusivamente en una tarea o pieza de información a través de una ventana que se encuentra en la parte superior del contenido de la página.
Su uso es muy sencillo y se suelen utilizar para requerir una respuesta inmediata del usuario que impida continuar con un proceso, notificar al usuario una información urgente (normalmente para informar de errores del sistema), o confirmar la decisión de un usuario, describiendo claramente la acción que está confirmando y explicando las posibles consecuencias que pueda acusar. Si bien son efectivos cuando se usan correctamente, las ventanas emergentes deben usarse con moderación para limitar las interrupciones al usuario. La ventana emergente se representa mediante una **superposición** de pantalla, dependiendo del tipo de ventana, esta puede mantener u ocultar el contenido de la página vista. Para **cerrar** las ventanas emergentes podemos presionar el icono «x», disponer un botón de «cerrar» o presionar en cualquier parte fuera del diálogo siempre y cuando no se requiera una acción determinada. La ventana se compone de tres zonas distintas, un **encabezado**, el **cuerpo** y un **pie** de la ventana. Los componentes (por ejemplo, textos, controles de entrada…) pueden ocupar todo el ancho de la ventana. El encabezado incluye un título, una etiqueta (opcional) y el icono de cierre. El cuerpo contiene la información y los controles necesarios para completar la tarea modal, también puede incluir texto y componentes del mensaje. Las principales acciones para completar la tarea del cuadro de diálogo transaccional se encuentran en el pie de pagina, donde se agrupan los botones. Las ventanas emergentes adaptan su **tamaño** al contenido. Hay cuatro tamaños predefinidos para el ancho de estas ventanas, extra-pequeño (XS), pequeño (S), normal o predeterminado (M) y grande (L).
Los tamaños de ancho de ventana depende del tamaño de la pantalla, y se adaptanm a estos siguiendo el modelo de la rejilla de 16 columnas definido. | | **XS** | | **S** | | **M** | | **L** | | | :--------------: | :------: | :----: | :-----: | :----: | :-----: | :----: | :-----: | :----: | | **breakpoint** | ancho | cols | ancho | cols | ancho | cols | ancho | cols | | 1584 | 24% | 4 | 36% | 6 | 48% | 8 | 72% | 12 | | 1312 | 24% | 4 | 36% | 6 | 48% | 8 | 72% | 12 | | 1056 | 32% | 5 | 42% | 7 | 60% | 10 | 84% | 14 | | 672 | 48% | 4 | 60% | 5 | 84% | 7 | 96% | 8 | | 320 | 100% | 4 | 100% | 4 | 100% | 4 | 100% | 4 | Las ventanas con mensajes cortos deben usar un tamaño extra-pequeño o pequeño para evitar largas líneas de texto; para ventanas con información más compleja, o múltiples campos de entrada de datos, el modal normal o el grande será el adecuado. El **alto** de cada ventana se adaptará al contenido de la misma. Cada tamaño de ventana tiene una **altura máxima** para mantener una proporción adecuada. Si una ventana, por su contenido, supera la altura máxima, se usará el siguiente tamaño de ventana.
La altura máxima depende del tamaño de la pantalla y del ancho de la ventana, siendo los valores de referencia de 48% para XS, 72% para S, 84% para M y 96% para L. Los elementos que componen la **anatomía** de ventana emergente o modal se disponen en una ventana de fondo blanco, con un padding de 16px, conservando las propiedades inherentes de cada uno de ellos.
Dentro de un modal, los títulos, tendrán un margen derecho con respecto al icono de 16px, el resto de los elementos de formulario y otros componentes expanden todo el ancho de una ventana modal. Entre los diferentes componentes habrá una altura de separación establecida de 16px, con la excepción del complemento botón, que será de 32px con respecto al anterior componente.
El contenido condiciona el tamaño de la ventana. El contenido de una ventana **nunca** debe **desplazarse horizontalmente**; en su lugar, se debe de utilizar una ventana de mayor tamaño. Cuando el contenido es más largo que la altura máxima de la ventana, la sección del cuerpo debe **desplazarse verticalmente** con el encabezado y el pie de página fijos en su lugar. El contenido debe desvanecerse visiblemente al final del área del cuerpo modal para indicar que hay contenido adicional fuera de la vista. Esta práctica, aunque posible, no es muy recomendable ya que complica la interacción con el usuario.
### Diálogo con el usuario mediante ventana emergente Los diálogos con el usuario suceden cuando se necesita enfocar la atención del usuario, completar tareas breves, recopilar información del usuario o mostrar información relevante. Los diálogos se usan comúnmente para tareas cortas y poco frecuentes, como tareas de edición o administración. Si un usuario necesita realizar una tarea repetidamente, hay que considerar hacer que la tarea sea accesible desde la página principal, ya que un cuadro de diálogo aumenta la interacción del flujo de trabajo, sacando al usuario de su contexto anterior y requiriendo acciones adicionales para completar y/o descartar. Considerando estas tareas en el flujo de trabajo, se recomiendan los diálogos para centrar la atención del usuario en la ejecución del propio diálogo. No está recomendado para mostrar grandes cantidades de datos o datos complejos, tampoco en el caso que el contenido no este relacionado con el flujo de trabajo o cuando no lo haya activado el usuario. Los diálogos se desencadenan como resultado de la acción de un usuario y no son generados por el sistema. Los componentes más comunes que pueden desencadenar un cuadro de diálogo incluyen un botón, un enlace o un icono. Una vez que el cuadro de diálogo esté abierto, el enfoque se establece inicialmente en la primera ubicación que acepte la entrada del usuario y permanecerá en la ventana emergente del diálogo hasta que se cierre. Un **diálogo modal** desencadena un estado (o modo) que centra la atención del usuario exclusivamente en una tarea o pieza de información relevante. Estos diálogos se usan cuando se interrumpe en flujo de trabajo habitual y se requiere una interacción expresa por parte del usuario. Cuando un ventana emergente de diálogo modal está activo, el contenido de la página inferior se oscurece y es inaccesible hasta que el usuario completa la tarea o cierra la ventana.
Se recomienda la utilización del dialogo modal para solicitar información, cuando esta solicitud impida que el sistema continúe con un proceso iniciado por el usuario. También para notificar al usuario información urgente sobre la tarea en la que está interactuando y para informar de errores del sistema o transmitir una consecuencia de la acción de un usuario. Su uso más frecuente es la confirmación de decisiones del usuario. No se recomienda el uso de diálogos modales si el usuario necesita consultar información fuera de la ventana, ya que la información está restringida a la ventana modal para la toma de decisiones. El anidamiento de diálogos modales tampoco se recomienda, si el primer modal depende de un modal de confirmación, esa primera tarea no debe realizarse en un modal. Un modal no sustituye a una página. Si un cuadro de diálogo modal necesita más espacio del que permite el componente modal grande, entonces el contenido debe mostrarse en una página propia y no en un modal. Cuando un **diálogo no modal** está activo, el usuario puede continuar viendo e interactuando con la página principal mientras el diálogo está abierto. Los diálogos no modales se utilizan comúnmente para presentar información no crítica o tareas de usuario opcionales.
Un dialogo no modal se usa cuando un usuario necesita comparar o consultar información en la página principal junto con la ventana, para realizar tareas o presentar información que puede acelerar el flujo de trabajo del usuario y para mostrar información adicional que ayude a la toma de decisiones del usuario El uso de un dialogo no modal no está recomendado para cuando se requiere una respuesta por parte del usuario. El componente ventana emergente puede utilizarse en los diálogos de diferentes formas según el **tipo de diálogo** establecido (diálogo pasivo, transaccional, de reconocimiento y de peligro). Los distintos usos definen distintas formas de interacción, recogida de información, botones de acción… Los **diálogos pasivos** presentan información que el usuario debe conocer acerca de su flujo de trabajo actual. Incluyen elementos de texto como un título o una mensaje de explicación. No contiene acciones que deba realizar el usuario y no debe incluir ningún dato que deba enviarse. Sirven como un tipo de notificación de alta importancia, que alerta al usuario sobre información urgente, como informar errores del sistema o transmitir una consecuencia de la acción de un usuario.
Los **diálogos transaccionales** requieren que se tome una acción para que el la ventana se complete y cierre. Contiene botones de acción primaria y otros secundarios como cancelar. Son persistentes hasta que se descartan finalizando la tarea haciendo clic en la acción principal o cerrándola. Además de los elementos de información como el título, la etiqueta o el mensaje de texto, puede incluir elementos para la captura de información y botones de la ventana emergente que permiten las acciones necesarias. Los botones se representan con el componente botón, en cuya descripción ya se ha explicado como disponer los grupos de botones dentro de un cuadro de diálogo y sus correspondientes acciones.
El **dialogo de peligro** es un tipo específico de diálogo transaccional utilizado para acciones destructivas o irreversibles. En este caso, el botón principal es reemplazado por un botón de alerta. Se utilizan comúnmente en momentos de alto impacto como confirmación de una acción que daría lugar a una pérdida significativa de datos si se realizara accidentalmente.
Cuando el sistema requiere un reconocimiento de la información por parte del usuario se usa el **diálogo de reconocimiento**. Contiene solo un botón, comúnmente «Aceptar». Son persistentes hasta que se reconoce el mensaje mediante el botón correspondiente. No se permite el cierre ignorando el mensaje.
Se pueden utilizar cualquier tipo de **componentes** dentro de las ventanas emergentes de un diálogo, desde elementos de texto, componentes de captura de datos simples como campos de texto, selectores desplegables… hasta componentes como listas estructuradas para organizar la información y cualquier otro. Cuando sea posible, se debe evitar el uso de componentes complejos que puedan complicar la finalización de la tarea o prolongar el tiempo de un usuario en el diálogo. No se recomienda la operación con tablas dentro de un diálogo o movimientos de elementos. El viaje de un usuario a través del diálogo debe ser directo y corto. Se debe evitar los componentes que alejen al usuario del cuadro de diálogo. Por ejemplo, no se recomienda el uso de componentes como enlaces que alejan al usuario del contexto actual y de la tarea en cuestión. También se deben evitar los componentes que ocultan información u opciones al usuario, como el acordeón y las pestañas, y requieren un esfuerzo adicional por parte del usuario para descubrir todo el contenido disponible. El tiempo empleado en un diálogo debe ser mínimo y solo debe incluirse la información necesaria para completar la tarea. Si hay demasiada información para que un usuario la consuma en un contexto de diálogo, se debe considerar usar una página completa en su lugar Como resumen de lo expuesto anteriormente, existen unas **buenas prácticas** recomendadas en el uso de diálogos. - No abusar de los diálogos. Los diálogos son invasivos y pueden molestar fácilmente al usuario si se usan incorrectamente o con demasiada frecuencia. Cuando los cuadros de diálogo se utilizan para tareas no relacionadas con el flujo de trabajo, es probable que un usuario comience a ignorar o descartar los cuadros de diálogo sin comprender completamente el contenido. - Los diálogos deben ser iniciados por el usuario. No se debe interrumpir al usuario abriendo un cuadro de diálogo cuando no lo esté esperando y evitar las ventanas emergentes generadas por el sistema que distraen al usuario mientras trabaja. - Las tareas de diálogo deben ser directas, sencillas y fáciles de completar para mantener la atención del usuario en la tarea que está realizando. Cuando se decide utilizar un cuadro de diálogo, se ha de considerar cómo podría expandirse la tarea en el futuro y si un cuadro de diálogo podrá incorporar acciones adicionales de manera efectiva. - Se debe evitar los componentes que alejen al usuario del cuadro de diálogo. El propósito de un diálogo es centrar la atención del usuario en una tarea en particular y no debe alentar ninguna acción que no esté relacionada con la finalización de esa tarea.